<template>
	<!-- 划转记录 -->
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model" :style="model=='light'?'background:#fff':''">
			<view class="status_bar">
	
			</view>
			<view class="nav_bar flex align-center justify-between">
				<view class="flex-1">
					<view @click="$tool.goBack()" class="f0 p-3">
						<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
					</view>
				</view>
				<view class="A-Medium" :class="'navTitle_'+model">
					{{i18n10.n035}}
				</view>
				<view class="flex-1">
				</view>
			</view>
			<!-- <view class="" style="height: 32rpx;">
				
			</view> -->
			<view class="selectWrap py-3 pl-3 flex align-center" :class="model=='light'?'selectWrapLight':''">
				<view @click="open1" class="flex align-center mr-4">
					<view class="title A-Bold mr-1" :class="model=='light'?'titleLight':''">
						{{i18n.p016}}
					</view>
					<view class="f0">
						<image style="width: 14rpx;height: 8rpx;" :src="'/static/images/record/1_'+model+'.png'" mode=""></image>
					</view>
				</view>
				<view @click="open2" class="flex align-center mr-4">
					<view class="title A-Bold mr-1" :class="model=='light'?'titleLight':''">
						{{i18n.p017}}
					</view>
					<view class="f0">
						<image style="width: 14rpx;height: 8rpx;" :src="'/static/images/record/1_'+model+'.png'" mode=""></image>
					</view>
				</view>
				<view @click="open3" class="flex align-center mr-4">
					<view class="title A-Bold mr-1" :class="model=='light'?'titleLight':''">
						{{i18n.p018}}
					</view>
					<view class="f0">
						<image style="width: 14rpx;height: 8rpx;" :src="'/static/images/record/1_'+model+'.png'" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 列表 -->
		<view class="recordWrap A-Medium mx-3" v-for="(item,index) in list" :class="model=='light'?'recordWrapLight':''">
			<!-- 单号 -->
			<view class="flex align-center justify-between">
				<view class="text1">
					{{i18n10.n036}}
				</view>
				<view class="text1">
					{{item.transferOrderId}}
				</view>
			</view>
			<!-- 转出数量/收入数量 -->
			<view class="flex align-center justify-between" style="margin-top: 12rpx;">
				<view class="text1 A-Regular">
					{{item.transferType=='OUT'?i18n10.n037:i18n10.n038}}
					
				</view>
				<view v-if="item.transferType=='OUT'" style="font-size: 24rpx;color: #53D290;">
					-{{item.transferAmount}} {{item.coinType}}
				</view>
				<view v-else style="font-size: 24rpx;color: #D22540;">
					+{{item.transferAmount}} {{item.coinType}}
				</view>
			</view>
			<!-- 转出币种/收入币种 -->
			<view class="flex align-center justify-between" style="margin-top: 12rpx;">
				<view class="text1 A-Regular">
					{{item.transferType=='OUT'?i18n10.n039:i18n10.n040}}
					
				</view>
				<view v-if="item.transferType=='OUT'" class="text1">
					{{item.coinType}}
				</view>
				<view v-else class="text1">
					{{item.coinType}}
				</view>
			</view>
			<!-- 对方账号 -->
			<view class="flex align-center justify-between" style="margin-top: 12rpx;">
				<view class="text1">
					{{i18n10.n041}}
				</view>
				<view class="text1">
					{{item.transferEmail ? item.transferEmail : item.transferMobileNumber}}
				</view>
			</view>
			<!-- 转账状态 -->
			<view class="flex align-center justify-between" style="margin-top: 12rpx;">
				<view class="text1">
					{{i18n10.n057}}
				</view>
				<view class="text1">
					{{
						item.transferStatus=='Pass'?i18n10.n056:
						item.transferStatus=='Apply'?i18n10.n024:
						item.transferStatus=='No_Pass'?i18n10.n055:''
					}}
				</view>
			</view>
			<!-- 转帐时间 -->
			<view class="flex align-center justify-between" style="margin-top: 12rpx;">
				<view class="text1">
					{{i18n10.n042}}
				</view>
				<view class="text1">
					{{item.createTime}}
				</view>
			</view>
			
		</view>
		<view class="A-Medium text-alignC" style="font-size: 24rpx;color: #7F838D;">
			{{i18n.p023}}～
		</view>
		<sjPoup ref="sjPoup" @confirm="confirm2"></sjPoup>
		<bzPoup ref="bzPoup" @confirm="confirm1"></bzPoup>
		<ztPoup :type="2" ref="ztPoup" @confirm="confirm3"></ztPoup>
	</view>
</template>

<script>
	import bzPoup from '@/components/bzPoup.vue';
	import sjPoup from '@/components/sjPoup.vue';
	import ztPoup from '@/components/ztPoup.vue';
	import {
		transferList
	} from '@/core/api/index.js';
	export default {
		components:{
			bzPoup,
			sjPoup,
			ztPoup
		},
		data() {
			return {
				pageNo: 1,
				pageSize:10,
				coinType: '',
				startDate: '',
				endDate: '',
				transferStatus: '',
				isOpen1:false,
				isOpen2:false,
				isOpen3:false,
				list:[],
			}
		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		onShow() {
			this.$tool.setStatusBarStyle(this.model);
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			if(this.model == "dark"){
				currentWebview.setStyle({
					background: "#0E0F11"
				});
			}else{
				currentWebview.setStyle({
					background: "#ffffff"
				});
			}
		},
		computed: {
			i18n() {
				return this.$t('property');
			},
			i18n10() {
				return this.$t('newObj');
			},
			model() {
				return this.$store.state.config.model;
			}
		},
		onLoad() {
			this.getTransferList();
		},
		onReachBottom() {
			this.pageNo++;
			this.getTransferList();
		},
		methods:{
			getTransferList(){
				transferList({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					coinType: this.coinType,
					startDate: this.startDate,
					endDate: this.endDate,
					transferStatus: this.transferStatus,
					mobileUserId: uni.getStorageSync('mobileUserId')
				}).then(res=>{
					console.log(res,'cs');
					let list = res.result.records;
					if(this.pageNo==1){
						this.list = list;
					}else {
						if(list.length==0){
							this.pageNo--;
						}else{
							this.list.push(...list);
						}
					}
				})
			},
			open1() {
				this.closePopup(1);
				if(this.isOpen1){
					this.closePopup(4);
				}else{
					this.$refs.bzPoup.open();
				}
				this.isOpen1 = !this.isOpen1;
			},
			open2() {
				this.closePopup(2);
				if(this.isOpen2){
					this.closePopup(4);
				}else{
					this.$refs.sjPoup.open();
				}
				this.isOpen2 = !this.isOpen2;
			},
			open3() {
				this.closePopup(3);
				if(this.isOpen3){
					this.closePopup(4);
				}else{
					this.$refs.ztPoup.open();
				}
				this.isOpen3 = !this.isOpen3;
			},
			closePopup(e) {
				if (e != 1) {
					this.$refs.bzPoup.closePopup();
				}
				if (e != 2) {
					this.$refs.sjPoup.closePopup();
				}
				if (e != 3) {
					this.$refs.ztPoup.closePopup();
				}
			},
			confirm1(e) {
				this.coinType = e.value;
				this.pageNo = 1;
				this.getTransferList();
			},
			confirm2(e) {
				this.startDate = e.startDate;
				this.endDate = e.endDate;
				this.pageNo = 1;
				this.getTransferList();
			},
			confirm3(e) {
				this.transferStatus = e.value;
				this.pageNo = 1;
				this.getTransferList();
			},
		}
	}
</script>

<style scoped lang="scss">
	.selectWrap {
		background: #0E0F11;
		.title {
			height: 34rpx;
			line-height: 34rpx;
			font-size: 24rpx;
			color: #F7F7F7;
		}
		.titleLight {
			color: #0E0F11;
		}
	}
	.selectWrapLight {
		background: #E6E8EF;
	}
	.recordWrap {
		padding: 24rpx 30rpx;
		margin-bottom: 12rpx;
		.text1 {
			font-size: 24rpx;
			color: #7F838D;
		}
		.text2 {
			font-size: 28rpx;
			color: #D22540;
		}
		.text3 {
			font-size: 28rpx;
			color: #7F838D;
		}
		.text4 {
			font-size: 24rpx;
			color: #82DA4C;
		}
		.text5 {
			font-size: 24rpx;
			color: #53D290;
		}
	}
	.recordWrapLight {
		
	}
</style>